<html>
    <head>
        <title>HTML 文档结构</title>
    </head>
    <style type="text/css">
        body
        {
            background: url(https://gd-hbimg.huaban.com/c042ca25e4a2821f6f61fd32be234fb9adccb9a47ee679-IkPTx8) no-repeat;
            background-size: 100% 100% ;
        }
    </style>
    <body>
        <!-- <div class="group"> -->
            <!--输入框-->
            <!-- <input class="todovalue" type="text"  name="todovalueName" id="tovalueId" placeholder="请输入添加内容" onkeydown="valueChange(event)"/> -->
            
            <!-- <input type="button" value="button1" onclick="handleClick()"></input>
            <button type="button" id="button3">button3</button> -->

            <!--遍历数据-->
            <!-- <div id="todoList">
                <div class="item" id="item0"> 
                    <input class="item-chk" type="checkbox" />
                    <div class="item-sp">吃饭</div>
                    <input id="item-del-0" class="item-del" type="button" value="删除" onclick="handleDelClick(0)"></input>
                </div>
                <div class="item" id="item1"> 
                    <input class="item-chk" type="checkbox" />
                    <div class="item-sp">看书</div>
                    <input id="item-del-1" class="item-del" type="button" value="删除" onclick="handleDelClick(1)"></input>
                </div>
                <div class="item" id="item2"> 
                    <input class="item-chk" type="checkbox" />
                    <div class="item-sp">睡觉</div>
                    <input id="item-del-2" class="item-del" type="button" value="删除" onclick="handleDelClick(2)"></input>
                </div>
            </div> -->

            <!--操作的footer-->
            
        <!-- </div> -->
        
        <div class="main">
            <div class="row">
              <input class="input" type="text" id="inputtext" placeholder="请输入添加任务，并按回车或按钮以添加任务" onkeyup="valueChange(event)"/>
              <input type="button" class="bt" value="添加" onclick="handleClick(event)" />
              <!-- <input type="button" class="bt" id="button2" value="确认2" /> -->
            </div>
            <div id="todogroup">
            </div>
        </div>
    
    </body>

    <style>
        

        
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

        .main {
            padding: 8px;
            border: 1px solid #333333;
            border-radius: 8px;
        }

        .row {
            display: flex;
        }

        .item {
            display: flex;
            align-items: center;
            margin: 6px;
            padding: 3px;
            background-color: rgba(0, 0, 0, 0.3);
        }

        .item:hover{
            background-color: #a1a1a173;
            transform: scale(1.1);
        }

        .item-value {
            flex-grow: 1;
            color: #fff;
        }

        .item-del {
            color: aliceblue;
            background-color: rgba(255, 0, 0, 0.875);
            border: 0px;
            border-radius: 4px;
            opacity: 0;
        }

        .item-del:hover{
            opacity: 1;
        }

        .item:hover .item-del{
            opacity: 1;
        }

        .input{
            width: 350px;
            padding: 8px;
            border-radius: 4px;
            border: 1px solid #939393;
            outline: none;
        }

        .input:focus{
            box-shadow: 4px 4px 4px #b1bef4;
            border: 1px solid #b1bef4;
        }

        .bt{
            background-color: rgba(191, 213, 255, 0.892);
            border-radius: 4px;
            border: 1px solid #DFDFDF;
            width: 50px;
        }
    </style>

    <script lang="javascript">
        // var index=0;
        // function init(){
        //     document.getElementById("button3").onclick=handleClick;
        // }
        
        // function valueChange(e){
        //     console.log(e);
        //     if(event.keyCode == 13){
        //         handleClick();
        //     }
        // }

        // function handleClick(){
        //     var tmp=document.getElementsByName("todovalueName")[0].value;
        //     var div=document.createElement("div");
        //     div.innerText=tmp;
        //     document.getElementById("todoList").append(div);
        // }
        
        // function handleDelClick(index){
        //     var arr=document.getElementById("todoList");
        //     console.log(arr);
        //     document.getElementById("item"+index).remove();
        // }

        var intCnt = 0;

        function init(){
        // document.getElementById("button2").onclick = handleClick;
        }

        function valueChange(e){
            console.log(e);
            if(e.keyCode == 13){
            handleClick(e);
            }
        }   

        function handleClick(e){
            console.log('handleClick');
            console.log(e);
            var temp = getValue();

            document.getElementById("todogroup").innerHTML += "<div class='item' id='todo"
            +intCnt+"'><input type='checkbox' name='todocheck'><div class='item-value'>"
            +temp+"</div><button class='item-del' type='button' onclick='deleteByIndex("
            +intCnt+")'>删除</button></div>";
            document.getElementById('inputtext').value = '';
            intCnt++;
        }

        function deleteByIndex(index){
            document.getElementById("todo" + index).remove();
        }

        function getValue(){
            var temp = document.getElementById("inputtext");
            console.log(temp.value);
            return temp.value;
        }

        function enter(id){
            document.getElementById(id).style='background-color:#3e3e3e'
        }

        function leave(id){
            document.getElementById(id).style='background-color:#FFFFFF'
        }

        init();
    </script>
</html>


